<script setup lang="ts">
import {ElMessage, ElMessageBox} from 'element-plus';
import {defineEmits} from 'vue'
import {captcha} from '@/api/api';

const route = useRoute()
const emit = defineEmits(['change'])
const form = reactive({
  navIndex: 0,
  getCode: false,
  getCodeText: '获取验证码',
  password: '',
  logData: {
    userPhone: '',
    userPaw: '',
    code: '',
    autPassword: '',
    areaCode: 86
  }
});
watch(() => form.logData, () => {
  console.log(form.logData)
  emit('change', form.logData)
}, {
  deep: true,
  immediate: true,
})
onMounted(() => {
  if (Object.keys(route.query).length > 0) {
    form.logData = route.query
  }
})
const codeSmsFun = () => {
  if (!form.logData.userPhone) {
    ElMessage.error('请输入手机号码')
    return
  }
  if (!form.getCode) {
    form.getCode = true
    let timer = 60;
    captcha({phone: form.logData.userPhone, type: form.logData.areaCode}).then((res: any) => {
      if (res.code === 200) {
        ElMessage.success('验证码已发送')
        form.logData.code = res.data
        const timers = setInterval(() => {
          timer -= 1
          form.getCodeText = timer.toString()
          if (timer === 0) {
            form.getCodeText = '获取验证码'
            form.getCode = false
            clearInterval(timers)
          }
        }, 1000)
      }
    })
  }
}

</script>

<template>
  <div class="panel-input">
    <div v-if="form.navIndex === 0">
      <div class="panel-input-item" style="display: flex">
        <el-select
            v-model="form.logData.areaCode"
            class="m-2"
            placeholder="86"
            style="width: 100px;margin-right: 10px"
        >
          <el-option :key="86" label="+86" :value="86"/>
          <el-option :key="65" label="+65" :value="65"/>
        </el-select>
        <el-input
            v-model="form.logData.userPhone"
            placeholder="请输入手机号码"
            clearable
        />
      </div>
      <div style="display: flex; justify-content: space-between">
        <div style="width: 60%">
          <el-input
              v-model="form.logData.code"
              placeholder="请输入验证码 "
              clearable
          />
        </div>
        <div style="width: 30%" class="panel-button-code" @click="codeSmsFun">{{ form.getCodeText }}</div>
      </div>
      <div class="panel-input-item">
        <el-input
            v-model="form.logData.userPaw"
            placeholder="请输入密码"
            clearable
            show-password
        />
      </div>
      <div class="panel-input-item">
        <el-input
            v-model="form.logData.autPassword"
            placeholder="请再次输入密码"
            clearable
            show-password
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
::v-deep .el-input__wrapper {
  box-shadow: unset !important;
  background: #f5f5f5;
  height: 45px !important;
  font-size: 16px !important;
  border-radius: 10px !important;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #189b9e !important;
  font-size: 20px !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #189b9e !important;
  border-color: #189b9e !important;
  font-size: 20px !important;
}

.panel-input {
  .panel-input-item {
    margin: 20px 0;
  }
}

.panel-button-code {
  padding: 10px;
  background-color: #a02831;
  color: white;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
